<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div style="margin-top: 20px;">
    <div class="search_block">

        <div class="layui-inline">
            <div class="layui-input-inline">
                <button class="layui-btn" style="float: right;padding-right: 10px" id="add_btn" data-type="add">添加新类别</button>
                <label class="tip">${stateMsg}</label>
            </div>
        </div>
    </div>

    <table class="layui-hide" id="sampleTypes_table" lay-filter="sampleTypes_table"></table>

    <%--操作条--%>
    <script type="text/html" id="tool_bar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑信息</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
    </script>

    <script>
        layui.use(['table','layer','form','upload'],function () {
            var table=layui.table,
                layer=layui.layer,
                form=layui.form,
                $=layui.jquery;

            table.render({
                elem: '#sampleTypes_table'
                ,even:true
                ,url:'/back/sampleType/load'
                ,cols: [[
                    {field:'sampleType', title: '类别' ,sort: true}
                    ,{field:'sampleList', title: '该类下的产品',templet:'#sampleTempl' }
                    ,{field:'detail', title: '详细介绍' }
                    ,{fixed: 'right',width:150,title:'操作', align:'center', toolbar: '#tool_bar'}
                ]]
                ,done:function () {
                }
                ,id:'id'
                ,page: true
                ,limit:10
            });


            //操作栏模块
            table.on('tool(sampleTypes_table)',function (obj) {
                var data=obj.data;
                var event=obj.event;
                if(event=='edit'){
                    layer.open({
                        title:'修改页面'
                        ,type: 1
                        ,skin: 'layui-layer-lan'
                        ,area: ['330px','320px']
                        , content: $('#sampleType_form')
                        ,success: function(layero, index){
                            $('#sampleType_form').attr('action','${pageContext.request.contextPath}/back/sampleType/modifyInfo');
                            $('#id').val(data.id);
                            $('#sampleType').val(data.sampleType);
                            $("#detail").val(data.detail);
                            $('#btn').text("提交修改");
                            form.render();
                        }
                    });
                }
                if(event=="del"){
                    layer.confirm('要删除这个样品类吗?', function(index){
                        $.post("${pageContext.request.contextPath}/back/sampleType/delete",{id:data.id},function (state) {
                            var result=eval('('+state+')');
                            if(result){
                                layer.msg("删除成功");
                                obj.del();
                                layer.close(index);
                            }else{
                                layer.msg("删除失败");
                                layer.close(index);
                            }
                        });

                    });
                }


            });

            //搜索添加模块
            var $ = layui.$, active = {
                add:function () {
                    layer.open({
                        title:'添加新类别'
                        ,type: 1
                        ,skin: 'layui-layer-lan'
                        ,area: ['330px','320px']
                        , content: $('#sampleType_form')
                        ,success: function(layero, index){
                            $('#sampleType_form').attr('action','${pageContext.request.contextPath}/back/sampleType/add');
                            $('#id').val("");
                            $('#sampleType').val("");
                            $('#detail').text("");
                            $('#btn').text("提交添加");
                            form.render();
                        }
                    })
                }
            };


            $('#add_btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

        });

        function formatSample(datas) {
            var text="";
            for(var i=0;i<datas.length;i++){
                text+=datas[i].code+":"+datas[i].sampleName+"/";
            }
            return text;
        }

    </script>
    <script type="text/html" id="sampleTempl">
            {{formatSample(d.sampleList)}}
    </script>

</div>

<form id="sampleType_form" style="display: none" class="layui-form" action="#" method="post">
    <input type="hidden" id="id" name="id"/>
    <div class="info_form_body">
        <div class="layui-form-item">
            <label class="layui-form-label">产品类别:</label>
            <div class="layui-input-block">
                <input id="sampleType" type="text" name="sampleType"  lay-verify="required" placeholder="产品号" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">详细介绍:</label>
            <div class="layui-input-block">
                <textarea id="detail" name="detail" placeholder="详细介绍" class="layui-textarea"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button id="btn" lay-submit="" lay-filter="check" class="layui-btn"></button>
            </div>
        </div>
    </div>
</form>

<div id="image_show" style="display: none">
    <div id="tool" class="toolbar">
    </div>
    <div style="padding: 5px 0; color: black">请在下面操作样品图片(不要输入文字，不负责存储，非常抱歉，传图片时候需要非常注意，因为删除图片我还没写，一旦上传，需要删除的话请跟我联系)<hr/></div>
    <div id="editor" class="text">
    </div>
</div>
